<template>
  <el-card class="box-card" shadow="hover" v-if="show">

    <template #header>
      <div class="card-header">
        <span>副本类型统计</span>
        <el-button class="button" style="float: right" @click="show = false" text><el-icon ><Close /></el-icon></el-button>
      </div>
    </template>

    <el-row align="middle" >
      <el-col :span="12">
        <div :id="id" style="width: 100%;height: 400px;" />
      </el-col>
      <el-col :span="12">
        <el-row style="width: 100%">
          <el-col
              style="width: 80px"
              v-for="[key,value] in typeMap.entries()"
              :key="key"
              :span="8"
              :xs="{ span: 24 }"
          >
            <span >
              <el-image :src="getDutyIconUrl(key)" class="icon"/>
              <span style="margin-left: 10px">{{ getDutyTypeName(key) }}:{{ value }}</span>
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import type {EChartsOption} from "echarts";
import {Close} from "@element-plus/icons-vue";
import {computed, nextTick, onMounted, ref} from "vue";
import { typeMap } from '@/data/service/logAnalysisService'
import {getDutyTypeName} from "@/data/constants/DutyType";
import {getDutyIconUrl} from "@/data/service/dutyService";

const props = defineProps({
  id: {
    type: String,
    default: 'type pie',
  },
  className: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '500px',
  },
  height: {
    type: String,
    default: '400px',
  },
  value:{
    type: Object,
    default: new Map()
  }
});

const show = ref(true)

const versionData = computed(()=>{
  const versionList:any[] = []
  typeMap.forEach((value, key)=>{
    versionList.push({name:getDutyTypeName(key), value:value})
  })
  return versionList
})

const option: EChartsOption =  {
  tooltip: {
    trigger: 'item',
    formatter: (params:any) => {
      const colorBlock = '<span style="color: '+params.color+'">●</span>'
      const name = params.name
      const value = params.value
      const percent = params.percent
      return colorBlock + ' ' + name + ' ' +value + '(' + percent + '%)'
    }
  },
  legend: {
    bottom:20,
    left: 'center'
  },
  label: {
    formatter: '{b}:{c}({d}%)'
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "left",
    top: "bottom",
    feature: {
      saveAsImage: { show: true },  // 保存图表
    },
  },
  series: [
    {
      bottom:64,
      type: 'pie',
      radius: '50%',
      data: versionData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

function initChart(){
  let chartDom = document.getElementById(props.id)!;
  let myChart = echarts.init(chartDom);
  myChart.setOption(option)
}

onMounted(()=>{
  nextTick(()=>{
    initChart()
  })
})

</script>

<style scoped>
.icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>